<template>
  <div class="input-box">
    <span class="title">{{ title + " : " }}</span>
    <input
      :type="type"
      class="input"
      :style="{ width: x }"
      :value="modelValue"
      @input="check($event.target.value)"
    />
    <button
      class="btn"
      :disabled="remind != '' || modelValue == ''"
      v-if="btn"
      v-debounce="{ fn: send }"
    >发送验证码</button>
    <span class="remind">{{ remind }}</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, defineProps, defineEmits, ref } from "vue";
import { userRequest } from '../api/UserRequest'
export default defineComponent({
  name: "InputBox",
});
</script>

<script lang="ts" setup>
const props = defineProps({
  type: {
    type: String,
    default: "text"
  },
  title: {
    type: String,
    required: true,
  },
  modelValue: {
    type: String,
  },
  x: {
    type: String,
    default: "750px",
  },
  btn: {
    type: Boolean,
  },
  checkout: {
    type: RegExp || String,
  },
});
const emit = defineEmits(["update:modelValue"]);
let remind = ref("");
// let btnValue = ref("")
function check(value: string): void {
  // 如果需要校验
  if (props.checkout) {
    //  需要比对的是字符串是否相同
    if (typeof props.checkout == "string") {
      // 校验成功
      if (value == props.checkout) {
        remind.value = "";
        emit("update:modelValue", value);
      } else {    //校验失败
        remind.value = "*与原密码不同！";
        emit("update:modelValue", value);
      }
    } else {   //需要比对的是正则表达式
      // 校验成功
      if (props.checkout.test(value)) {
        remind.value = "";
        emit("update:modelValue", value);
      } else {
        //校验失败
        remind.value = "*格式错误，请重新输入！";
        emit("update:modelValue", value);
      }
    }
  } else {
    //不需要校验
    remind.value = "";
    emit("update:modelValue", value);
  }
}

function send() {
  userRequest.send(props.modelValue);
}

</script>

<style lang="scss">
.input-box {
  .title {
    display: inline-block;
    width: 250px;
    text-align: right;
    font-size: 35px;
    color: #8a8888;
  }
  .input {
    margin-left: 20px;
    padding-left: 20px;
    height: 58px;
    border-radius: 100px;
    font-size: 30px;
    border: 1px solid #707070;
    color: #8a8888;
  }
  .btn {
    width: 294px;
    height: 58px;
    background: #707070;
    color: #f5f5f5;
    border-radius: 100px;
    margin-left: 35px;
    font-size: 35px;
    cursor: pointer;
    border: none;
  }
  .remind {
    font-size: 20px;
    color: #df1313;
  }
}
</style>
